<template>
  <div class="condition-box">
    <div class="up-line" :style="`height:${props.attribute}`"></div>

    <div class="middle" @click="handleChange($event)">
      <div class="or" :class="{ active: props.active === 'or' }" data-condition="or">或</div>
      <div class="and" :class="{ active: props.active === 'and' }" data-condition="and">且</div>
    </div>

    <div class="down-line" :style="`height:${props.behavior}`"></div>
  </div>
</template>

<script>
export default {
  msg:'条件',
  props: ['props'],

  computed: {
    pageType() {
      // edit / add / preview
      return this.$route.query.pageType
    },

    is_preview() {
      return this.pageType === 'preview' ? true : false
    }
  },

  methods: {
    handleChange(e) {
      if(!this.is_preview) {
        this.$emit('handleChange', e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.condition-box {
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  & .middle {
    width: 80px;
    height: 60px;
    border-radius: 5px;
    border: 1px solid #1dc8a4;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  & .or, & .and {
    width: 100%;
    height: 30px;
    color: #1dc8a4;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  & .active {
    color: #fff;
    background: #1dc8a4;
  }

  & .up-line, & .down-line {
    width: 1px;
    margin: 10px 0 10px;
    background-color: #ededed;
  }
}
</style>
